<template>
  <van-nav-bar title="订单详情" left-text="" left-arrow @click-left="onClickLeft" />
  <!-- <div class="headerbox">
        <div class="header">
            <div class="headerL">
                <a onClick="javascript:history.back(-1)" class="goback"><img src="/images/goback.png" /></a>
            </div>
            <div class="headerC">
                <p>订单详情</p>smi
            </div>
            <div class="headerR"></div>
        </div>
    </div> -->
  <div class="clear"></div>
  <!-- <div class="h50"></div> -->
  <section class="aui-flexView">
    <!-- 订单详细 -->
    <section class="aui-scrollView">
      <!-- 订单状态 -->
      <div class="aui-pay-change">
        <div class="aui-flex">
          <div class="aui-flex-box" v-if="status == 3 || status == -1">
            <h3>已完结</h3>
          </div>
          <div class="aui-flex-box" v-if="status == -2">
            <h3>该订单未支付...</h3>
          </div>
          <div class="aui-flex-box" v-if="status == 1 || status == 2">
            <h3>订单进行中...</h3>
          </div>
          <div class="aui-pay-zfb">
            <img src=".//images/icon-zfb.png" alt="" />
          </div>
        </div>
      </div>

      <!-- 收货地址 -->
      <div class="aui-flex">
        <div class="aui-flex-add">
          <img src=".//images/avatar-01.jpg" alt="" />
        </div>
        <div class="aui-flex-box">
          <h3>
            {{ addressData.name }} <em> {{ addressData.tel }}</em>
          </h3>
          <p>{{ addressData.address }}</p>
        </div>
      </div>

      <!-- 订单商品 -->
      <div class="aui-commodity-bg">
        <div class="item" v-for="item in orderPrdData">
          <div class="aui-flex">
            <div class="aui-commodity-img">
              <img :src="item.goods_list.shopUrl_text" />
            </div>
            <div class="aui-flex-box">
              <h4 class="van-ellipsis">商品名称：{{ item.goods_list.name }}</h4>
              <p>商品单价：￥{{ item.goods_list.price }}</p>
              <span class="aui-barter-time">七天退换</span>
            </div>
            <div>
              <h5>￥{{ item.total }}</h5>
              <p class="aui-sml-text">X{{ item.pronum }}</p>
            </div>
          </div>

          <div style="text-align: right">
            <button v-if="item.orders_list.remark == ''">评价:暂无评价</button>
            <button v-else>评价:{{ item.orders_list.remark }}</button>
          </div>
        </div>
      </div>

      <!-- 总价 -->
      <div class="aui-cp-edu b-line">
        <div class="aui-flex aui-flex-ed">
          <div class="aui-flex-box">
            订单总价<em style="color: #d4493a; font-weight: bolder; font-size: 1rem;">￥{{ amount }}</em>
          </div>
        </div>
      </div>

      <div class="divHeight b-line"></div>

      <!-- 订单详细内容 -->
      <div class="aui-flex aui-flex-text-sml b-line orderinfo">
        <div class="aui-flex-box">
          <p>
            <em>订单号:</em>
            {{ orderCode }}
          </p>
          <p v-if="status != -2">
            <em>配送物流:</em>
            中通快递
          </p>
          <p v-if="status != -2">
            <em>物流单号:</em>
            78758785228480
          </p>
          <p>
            <em>下单时间:</em>
            {{ buyTime }}
          </p>
          <p v-if="status != -2">
            <em>订单状态:</em>
            已完结
          </p>
          <p v-if="status != -2">
            <em>订单描述:</em>
            快点发货
          </p>
        </div>
      </div>
    </section>

    <footer class="aui-footer aui-footer-fixed">
      <div class="aui-footer-text-info" v-if="status == 1 || status == 2 || status == 3">
        <a href="javascript:;" class="aui-payment" @click="returnOrder()">申请退货</a>
      </div>
      <div class="aui-footer-text-info" v-if="status == 1 || status == 2">
        <a href="javascript:;" class="aui-payment" @click="confirmReceipt()">确认收货</a>
      </div>
      <div class="aui-footer-text-info" v-if="status == -2" @click="goPay()">
        <a href="javascript:;" class="aui-payment">立即支付</a>
      </div>
    </footer>
  </section>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { showToast } from 'vant';
import { POST } from "../services/request";
const router = new useRouter();
const route = new useRoute();
// 拿到传过来的id的值
const orderid = ref(route.query.orderId);
const userid = ref(route.query.uid);
const status = ref(route.query.status);
// console.log(userid.value);
// 存订单详情商品信息
const orderPrdData = ref([])
const amount = ref(null)
const orderCode = ref(null)

// 存放地址数据
const addressData = ref([])

// 下单时间
const buyTime = ref(null)

// console.log(orderid.value);
onMounted(async () => {
  await getOrderInfo();
})

// 根据传过来的订单的id查询订单商品，进行渲染
const getOrderInfo = async () => {
  const getOrderInfoRes = await POST({
    url: '/Order/getOrderInfo',
    params: {
      orderId: orderid.value,
      uid: userid.value
    }
  })
  if (getOrderInfoRes.code === 1) {
    // console.log(getOrderInfoRes.data);
    orderPrdData.value = getOrderInfoRes.data.orderProducts
    addressData.value = getOrderInfoRes.data.addressData
    orderPrdData.value.forEach((item) => {
      amount.value = item.orders_list.amount
      orderCode.value = item.orders_list.code
      buyTime.value = formatTimestamp(item.orders_list.createtime)
      // console.log(buyTime.value);

      // console.log(item.orders_list.amount);
    })
    // amount
    // console.log(amount.value );

  }
}

const onClickLeft = () => history.back();

const formatTimestamp = (timestamp) => {
  // 处理秒级时间戳
  if (timestamp.toString().length === 10) {
    timestamp = timestamp * 1000;
  }

  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
};

// 时间格式化
const formatTime = (timestamp) => {
  const date = new Date(timestamp);
  return `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes()}`;
};

// 立即支付
const goPay = async () => {
  console.log('立即支付');
  const goPayRes = await POST({
    url: '/Order/goPayOrder',
    params: {
      orderid: orderid.value,
      uid: userid.value,
      status: status.value,
    }
  })
  if (goPayRes.code === 1) {
    showToast(goPayRes.msg);
    router.push('/myOrderList');

  } else {
    showToast(goPayRes.msg);
  }
}

// 确认收货
const confirmReceipt = async () => {
  const confirmReRes = await POST({
    url: '/Order/confirmReceipt',
    params: {
      orderid: orderid.value,
      uid: userid.value,
      status: status.value,
    }
  })
  if(confirmReRes.code ===1){
    showToast(confirmReRes.msg);
    router.push('/myOrderList');
  }
}

// 申请退款
const returnOrder = async()=>{
  router.push({
    path:'/refund',
    query:{
      orderCode: orderCode.value,
      uid: userid.value,
      status: status.value,
    }
  })
  // const returnOrderRes = await POST({
  //   url:'/Order/returnOrder',
  //   params:{
  //     uid: userid.value,
  //     status: status.value,
  //     orderid: orderid.value,
  //   }
  // })
}

</script>